<template>
  <page-meta :root-font-size="$rootFontSize"></page-meta>
  <view style="min-height: 100vh" class="bg-gray">
    <!--师傅名片-->
    <view class="mx-4">
      <view class="bg-white rounded-lg py-2.5 mt-2.5">
        <view class="flex justify-between items-center mx-4">
          <view class="text-base text-dark font-medium">名片展示</view>
          <view
            ><u-switch
              v-model="info.isShowCard"
              size="48"
              activeColor="#FF3D62"
              inactiveColor="#CCCCCC"
              :activeValue="1"
              :inactiveValue="0"
              @change="switchCard('isShowCard', info.isShowCard)"
            ></u-switch
          ></view>
        </view>
      </view>
      <view
        class="text-xs text-darkNormal leading-10 ml-4"
        v-if="info.isShowCard"
        >名片已开启，将展示给下级徒弟</view
      >
      <view class="text-xs text-darkNormal leading-10 ml-4" v-else
        >名片未开启，下级徒弟无法查看</view
      >
      <!--名片容器-->
      <view class="pb-10" v-show="info.isShowCard">
        <view class="w-full h-40 rounded-2xl relative">
          <image class="w-full h-40 rounded-2xl" :src="info.backgroundUrl" />
          <view class="cardContent absolute left-5 right-3 top-6">
            <view class="flex justify-between">
              <view>
                <view
                  class="text-lg font-medium leading-7 mb-1.5"
                  :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                  v-if="info.isShowNick"
                  >{{ info.nickName }}</view
                >
                <view class="flex items-center py-0.5" v-if="info.isShowWechat"
                  ><view v-if="themeBg == 4"
                    ><u-icon
                      name="/static/icons/icon-wechat-white.png"
                      size="30"
                    ></u-icon></view
                  ><view v-else
                    ><u-icon
                      name="/static/icons/icon-wechat.png"
                      size="30"
                    ></u-icon></view
                  ><text
                    class="text-sm ml-2"
                    :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                    >{{ info.wechatNum }}</text
                  ></view
                >
                <view class="flex items-center py-0.5" v-if="info.isShowQQ"
                  ><view v-if="themeBg == 4"
                    ><u-icon
                      name="/static/icons/icon-qq-white.png"
                      size="30"
                    ></u-icon></view
                  ><view v-else
                    ><u-icon
                      name="/static/icons/icon-qq.png"
                      size="30"
                    ></u-icon></view
                  ><text
                    class="text-sm ml-2"
                    :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                    >{{ info.qqNum }}</text
                  ></view
                >
                <view class="flex items-center py-0.5" v-if="info.isShowPhone"
                  ><view v-if="themeBg == 4"
                    ><u-icon
                      name="/static/icons/icon-phone-white.png"
                      size="30"
                    ></u-icon></view
                  ><view v-else
                    ><u-icon
                      name="/static/icons/icon-phone.png"
                      size="30"
                    ></u-icon></view
                  ><text
                    class="text-sm ml-2"
                    :class="themeBg == 4 ? 'text-white' : 'text-dark'"
                    >{{ info.phone }}</text
                  ></view
                >
              </view>
              <view>
                <image class="w-28 h-28 rounded-lg" :src="info.headUrl" />
              </view>
            </view>
          </view>
        </view>
        <view class="bg-white rounded-lg py-2.5 mt-3" v-if="bgImg.length > 0">
          <view class="mx-4 flex items-center">
            <view class="text-base text-dark w-10">背景</view>
            <view class="ml-1">
              <u-row gutter="10">
                <u-col span="3" @click="switchTab(1)">
                  <u--image
                    :src="bgImg[0].backgroundUrl"
                    width="130rpx"
                    height="60rpx"
                    radius="6"
                  ></u--image>
                </u-col>
                <u-col span="3" @click="switchTab(2)">
                  <u--image
                    :src="bgImg[1].backgroundUrl"
                    width="130rpx"
                    height="60rpx"
                    radius="6"
                  ></u--image>
                </u-col>
                <u-col span="3" @click="switchTab(3)">
                  <u--image
                    :src="bgImg[2].backgroundUrl"
                    width="130rpx"
                    height="60rpx"
                    radius="6"
                  ></u--image>
                </u-col>
                <u-col span="3" @click="switchTab(4)">
                  <u--image
                    :src="bgImg[3].backgroundUrl"
                    width="130rpx"
                    height="60rpx"
                    radius="6"
                  ></u--image>
                </u-col>
              </u-row>
            </view>
          </view>
        </view>
        <view class="bg-white rounded-lg py-2.5 mt-3">
          <view class="mx-4 flex items-center">
            <view class="text-base text-dark w-14">头像</view>
            <view v-if="isDefaultImg" @click="isAvatar = true">
              <image class="w-14 h-14" src="/static/icons/icon-avatar.png" />
            </view>
            <view v-else @click="isAvatar = true">
              <image class="w-14 h-14 rounded-lg" :src="info.headUrl" />
            </view>
          </view>
        </view>
        <view
          class="text-sm leading-8"
          v-if="info.headUrlStatus == 1 || info.headUrlStatus == 3"
          >头像审核状态：<text class="text-red-500">{{
            info.headUrlStatus == 1
              ? '待审核'
              : info.headUrlStatus == 3
              ? '未通过'
              : '已通过'
          }}</text></view
        >
        <view class="text-sm" v-if="info.headUrlStatus == 3"
          >头像审核未通过原因：<text class="text-red-500">{{
            info.headRemark
          }}</text></view
        >
        <view class="bg-white rounded-lg py-2.5 mt-3">
          <view class="mx-4 flex justify-between">
            <view class="text-base text-dark w-14">昵称</view>
            <view class="flex-1">
              <u--input
                placeholder="请填写"
                v-model="info.nickName"
                maxlength="8"
                border="none"
                class="text-base text-dark"
                @blur="saveSubmit(info.nickName, 'nickName')"
                @confirm="saveSubmit(info.nickName, 'nickName')"
              ></u--input>
            </view>
            <view
              ><u-switch
                v-model="info.isShowNick"
                size="48"
                activeColor="#FF3D62"
                inactiveColor="#CCCCCC"
                :activeValue="1"
                :inactiveValue="0"
                @change="switchCard('isShowNick', info.isShowNick)"
              ></u-switch
            ></view>
          </view>
        </view>
        <view class="bg-white rounded-lg py-2.5 mt-3">
          <view class="mx-4 flex justify-between">
            <view class="text-base text-dark w-14">微信</view>
            <view class="flex-1">
              <u--input
                placeholder="请填写"
                v-model="info.wechatNum"
                maxlength="20"
                border="none"
                class="text-base text-dark"
                @blur="saveSubmit(info.wechatNum, 'wechatNum')"
                @confirm="saveSubmit(info.wechatNum, 'wechatNum')"
              ></u--input>
            </view>
            <view
              ><u-switch
                v-model="info.isShowWechat"
                size="48"
                activeColor="#FF3D62"
                inactiveColor="#CCCCCC"
                :activeValue="1"
                :inactiveValue="0"
                @change="switchCard('isShowWechat', info.isShowWechat)"
              ></u-switch
            ></view>
          </view>
        </view>
        <view class="bg-white rounded-lg py-2.5 mt-3">
          <view class="mx-4 flex justify-between">
            <view class="text-base text-dark w-14">QQ</view>
            <view class="flex-1">
              <u--input
                placeholder="请填写"
                type="number"
                v-model="info.qqNum"
                maxlength="11"
                border="none"
                class="text-base text-dark"
                @blur="saveSubmit(info.qqNum, 'qqNum')"
                @confirm="saveSubmit(info.qqNum, 'qqNum')"
              ></u--input>
            </view>
            <view
              ><u-switch
                v-model="info.isShowQQ"
                size="48"
                activeColor="#FF3D62"
                inactiveColor="#CCCCCC"
                :activeValue="1"
                :inactiveValue="0"
                @change="switchCard('isShowQQ', info.isShowQQ)"
              ></u-switch
            ></view>
          </view>
        </view>
        <view class="bg-white rounded-lg py-2.5 mt-3">
          <view class="mx-4 flex justify-between">
            <view class="text-base text-dark w-14">手机</view>
            <view class="flex-1">
              <u--input
                placeholder="请填写"
                type="number"
                v-model="info.phone"
                maxlength="11"
                border="none"
                class="text-base text-dark"
                @blur="saveSubmit(info.phone, 'phone')"
                @confirm="saveSubmit(info.phone, 'phone')"
              ></u--input>
            </view>
            <view
              ><u-switch
                v-model="info.isShowPhone"
                size="48"
                activeColor="#FF3D62"
                inactiveColor="#CCCCCC"
                :activeValue="1"
                :inactiveValue="0"
                @change="switchCard('isShowPhone', info.isShowPhone)"
              ></u-switch
            ></view>
          </view>
        </view>
      </view>
    </view>
    <!--头像弹窗-->
    <u-popup
      :show="isAvatar"
      @close="isAvatar = false"
      mode="bottom"
      :round="80"
    >
      <view class="pb-10 pt-3">
        <view class="flex justify-center">
          <view
            class="text-base text-dark text-center py-4 w-24"
            @click="uploadAvatar"
            >更换头像</view
          ></view
        >
        <view class="flex justify-center"
          ><view
            class="text-base text-dark text-center py-4 border-tb-gray w-24"
            @click="defaultAvatar"
            >使用默认头像</view
          ></view
        >
      </view>
    </u-popup>
  </view>
</template>

<script>
import { getCard, editCard } from '../../services/account';
import { postFile } from '../../../services/file';

export default {
  data() {
    return {
      //背景图
      bgImg: [],
      isAvatar: false,
      isDefaultImg: true,
      info: {
        backgroundUrl: '',
        headUrl: '',
        id: '',
        isShowCard: 0,
        nickName: '',
        isShowNick: 0,
        qqNum: '',
        phone: '',
        isShowPhone: 0,
        isShowQQ: 0,
        wechatNum: '',
        isShowWechat: 0,
      },
      infoBak: {},
      themeBg: 1,
    };
  },
  async created() {
    this._getCard();
  },
  methods: {
    //使用默认头像
    async defaultAvatar() {
      //判断头像如果是待审核，不允许操作修改头像接口
      if (this.info.headUrlStatus == 1) {
        uni.showToast({
          title: '头像审核中，不允许修改',
          icon: 'none',
        });
        return;
      }
      //判断如果是默认头像就不请求接口
      if (this.info.headUrl.indexOf('default-avatar.png') != -1) {
        this.isAvatar = false;
        return;
      }
      let params = {
        key: 'headUrl',
        val: 'common/images/default-avatar.png',
      };
      const { code, data } = await editCard(params);
      if (code != 200) return;
      uni.showToast({
        title: '修改成功',
        icon: 'none',
      });
      this._getCard();
      this.isDefaultImg = true;
      this.isAvatar = false;
    },
    //上传更换头像
    uploadAvatar() {
      //判断头像如果是待审核，不允许操作修改头像接口
      if (this.info.headUrlStatus == 1) {
        uni.showToast({
          title: '头像审核中，不允许修改',
          icon: 'none',
        });
        return;
      }
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
        success: async ({ tempFiles, tempFilePaths }) => {
          // #ifdef H5
          const file = tempFiles[0];
          // #endif
          // #ifndef H5
          const file = tempFilePaths[0];
          // #endif
          //console.log(file);
          const { code, data } = await postFile(file, 'head');
          if (code != 200) {
            return;
          } else {
            let params = {
              key: 'headUrl',
              val: data.path,
            };
            const { code } = await editCard(params);
            if (code != 200) return;
            this.isAvatar = false;
            uni.showToast({
              title: '修改成功',
              icon: 'none',
            });
            this._getCard();
          }
        },
      });
    },
    //获取师傅名片信息
    async _getCard() {
      const { code, data } = await getCard();
      if (code != 200) return;
      this.info = data;
      this.bgImg = data.bgList;
      this.infoBak = { ...data };
      //判断是否为默认头像
      if (this.info.headUrl.indexOf('default-avatar.png') == -1) {
        this.isDefaultImg = false;
      }
      //判断背景图是否黑色（白字）
      if (this.info.backgroundUrl.indexOf('bg-color4') != -1) {
        this.themeBg = 4;
      }
    },
    //开关一致方法
    async switchCard(key, e) {
      let params = {
        key: key,
        val: e.toString(),
      };
      //params[key] = e;
      //console.log(params);
      const { code, data } = await editCard(params);
      if (code != 200) return;
    },
    //路由跳转
    goTo(url) {
      this.$Router.push({
        name: url,
      });
    },
    //背景切换
    async switchTab(item) {
      //如果没有修改不要提交请求接口，否则会弹出不成功提示
      if (this.themeBg == item) {
        uni.showToast({
          title: '请修改后再提交',
          icon: 'none',
        });
        return;
      }
      this.themeBg = item;
      let params = {
        key: 'backgroundUrl',
      };
      switch (item) {
        case 1:
          params['val'] = this.bgImg[0].key;
          break;
        case 2:
          params['val'] = this.bgImg[1].key;
          break;
        case 3:
          params['val'] = this.bgImg[2].key;
          break;
        case 4:
          params['val'] = this.bgImg[3].key;
          break;
      }
      const { code, data } = await editCard(params);
      if (code != 200) return;
      this._getCard();
    },
    //编辑方法
    async saveSubmit(value, key) {
      let params = {
        key: key,
        val: value,
      };
      //如果没有修改不要提交请求接口，否则会弹出不成功提示
      if (this.infoBak[key] == value) {
        uni.showToast({
          title: '请修改后再提交',
          icon: 'none',
        });
        return;
      }
      if (key == 'phone') {
        if (!uni.$u.test.mobile(value)) {
          uni.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
          });
          return;
        }
      }
      //console.log(this.info, this.infoBak);
      const { code, data } = await editCard(params);
      if (code != 200) return;
      uni.showToast({
        title: '修改成功',
        icon: 'none',
      });
      this._getCard();
    },
  },
};
</script>

<style>
page {
  background: #f2f2f2;
}
</style>
